<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<i class="fa fa-arrow-left back-icon" @click="goBack"></i>
			<h3>账户红包</h3>
		</header>
		
	<ul class="hongbao-list">
		<li>
			<img src="../assets/hb.png">
			<div class="hongbao-info">
				<div class="hongbao-up">
					<h3>每日优惠红包</h3>
					<p>&#165;12</p>
				</div>
				<div class="hongbao-down">
					<h3>今日23:59到期</h3>
					<p>满30可用</p>
				</div>
				<div class="hongbao-detail">
					<p>满30元可用（使用门槛=商品现价+打包费-所有店铺优惠）</p>
				</div>
			</div>
		</li>
		
		<li>
			<img src="../assets/hb.png">
			<div class="hongbao-info">
				<div class="hongbao-up">
					<h3>每日优惠红包</h3>
					<p>&#165;8</p>
				</div>
				<div class="hongbao-down">
					<h3>今日23:59到期</h3>
					<p>满25可用</p>
				</div>
				<div class="hongbao-detail">
					<p>满30元可用（使用门槛=商品现价+打包费-所有店铺优惠）</p>
				</div>
			</div>
		</li>
		
		<li>
			<img src="../assets/hb.png">
			<div class="hongbao-info">
				<div class="hongbao-up">
					<h3>每日优惠红包</h3>
					<p>&#165;6</p>
				</div>
				<div class="hongbao-down">
					<h3>今日23:59到期</h3>
					<p>满15可用</p>
				</div>
				<div class="hongbao-detail">
					<p>满30元可用（使用门槛=商品现价+打包费-所有店铺优惠）</p>
				</div>
			</div>
		</li>
	</ul>
	<Footer/>
	</div>
	
	
</template>

<script>
	import Footer from '@/components/Footer.vue'
	export default {
		name: 'HongbaoAdvertisement',
		methods: {
			goBack() {
			// 返回上一页
			this.$router.go(-1);
			}
		},
		components: {
			Footer
		}
	}
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width:100%;
		height:100%;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	
	/****************** header ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		border-bottom: solid 1px #DDD;
		position: relative;
	}
	
	.wrapper header h3{
		font-size: 5.5vw;
		font-weight: 600;
		color: #FFFFFF;
		margin: 1vw 7vw;
		user-select: none;
	}
	.wrapper header .back-icon {
		position: absolute;
		left: 2vw;
		font-size: 4vw;
		color: #FFFFFF;
		cursor: pointer;
	}
	
	.wrapper .hongbao-list{
		width: 100%;
		height: 90vw;
	}
	.wrapper .hongbao-list li{
		width: 100%;
		height: 30vw;
		padding: 2.5vw;
		user-select: none;
		background-color: #FFFFFF;
		border-top: solid 15px #DCDCDC;
		border-bottom: solid 15px #DCDCDC;
		border-left: solid 20px #DCDCDC;
		border-right: solid 20px #DCDCDC;
		display: flex;
		box-sizing: border-box;
	}
	
	.wrapper .hongbao-list li img {
		width: 18vw;
		height: 18vw;
	}
	
	.wrapper .hongbao-list li .hongbao-info {
		width: 100%;
		box-sizing: border-box;
	}
	
	.wrapper .hongbao-list li .hongbao-info .hongbao-up {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 2vw;
		margin-left: 3vw;
	}
	
	.wrapper .hongbao-list li .hongbao-info .hongbao-up h3{
		font-size: 3.5vw;
		color: #000000;
	}
	
	.wrapper .hongbao-list li .hongbao-info .hongbao-up p{
		font-size: 4.5vw;
		color: #FF0000;
		font-weight: 550;
	}
	
	.wrapper .hongbao-list li .hongbao-info .hongbao-down {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 2vw;
		margin-left: 3vw;
	}
	
	.wrapper .hongbao-list li .hongbao-info .hongbao-down h3{
		font-size: 3.5vw;
		color: #FF6347;
	}
	
	.wrapper .hongbao-list li .hongbao-info .hongbao-down p{
		font-size: 3.5vw;
		color: 	#808080;
	}
	.wrapper .hongbao-list li .hongbao-info .hongbao-detail {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 3vw;
	}
	.wrapper .hongbao-list li .hongbao-info .hongbao-detail p{
		font-size: 2vw;
		color: 	#000000;
	}
</style>